<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        table,
        h1,
        form {
            margin: 15px auto 15px auto;
            text-align: center;
        }

        .div {
            width: 685px;
            height: 40px;
            background-color: rgba(134, 134, 134, 0.348);
        }

        table {
            border-collapse: collapse;
            height: 80px;
            text-align: center;
        }

        thead {
            height: 50px;
            background-color: rgba(221, 219, 219, 0.629);
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        th {
            padding: 6px 30px;
        }

        .add {
            width: 60px;
            height: 25px;
            background-color: rgb(191, 191, 224);
            border: 1px solid black;
            border-radius: 5px;
        }

        input,
        select {
            height: 25px;
            border: 1px solid black;
            border-radius: 5px;
        }
    </style>
</head>

<body>

    <h1>动漫角色榜</h1>
    <form action="" class="form">
        <input type="text" class="uname" name="unname" placeholder="角色名">
        <input type="text" class="age" name="age" placeholder="年龄">
        <input type="text" class="belong" name="belong" placeholder="属于公司">
        <select name="sex" class="sex">
            <option value="">未知</option>
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <select name="city" class="city">
            <option value=""></option>
            <option value="画江湖之不良人">画江湖之不良人</option>
            <option value="斗破苍穹">斗破苍穹</option>
            <option value="刺客伍六七">刺客伍六七</option>
            <option value="斗罗大陆">斗罗大陆</option>
            <option value="吞噬星空">吞噬星空</option>
            <option value="凡人修仙传">凡人修仙传</option>
            <option value="凡人修仙传">凡人修仙传</option>
        </select>
        <button class="add">添加</button>
    </form>
    <table>
        <thead>
            <th>ID</th>
            <th>角色名</th>
            <th>年龄</th>
            <th>所属公司</th>
            <th>性别</th>
            <th>剧名</th>
            <th>操作</th>
        </thead>
        <tbody>
            <!-- <tr>
                   
                </tr> -->
        </tbody>
    </table>

    <script>
        const arr = []
        let form = document.querySelector('.form')
        let uname = document.querySelector('.uname')
        let age = document.querySelector('.age')

        let belong = document.querySelector('.belong')

        let sex = document.querySelector('.sex')

        let city = document.querySelector('.city')
        let input = document.querySelectorAll('.form [name]')
        //  console.log(input);
        let tbody = document.querySelector('tbody')
        form.addEventListener('submit', function (e) {
            e.preventDefault()
            for (let index = 0; index < input.length; index++) {
                if (input[index].value === '') {
                   return alert('不能为空')
                }
            }
            let obj = {
                id: arr.length ? arr[arr.length-1].id+ 1:1,
                names: uname.value,
                age: age.value,
                belong: belong.value,
                sex: sex.value,
                city: city.value
            }
            arr.push(obj);
            this.reset()//清空<input type="reset">效果一样
            adds()
        })
        function adds() {
            tbody.innerHTML = ''
            for (let i = 0; i < arr.length; i++) {
                let tr = document.createElement('tr')
                tr.innerHTML = ` 
                    <td>${arr[i].id}</td>
                    <td>${arr[i].names}</td>
                    <td>${arr[i].age}</td>
                    <td>${arr[i].belong}</td>
                    <td>${arr[i].sex}</td>
                    <td>${arr[i].city}</td>
                    <td>
                        <a href="javascript:" data-id=${i}>删除</a>
                    </td>`
                tbody.appendChild(tr)
            }
        }
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                arr.splice(e.target.dataset.id, 1)
                adds()
            }
        })

    </script>
</body>

</html>